<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="formInline.username" placeholder="请输入角色名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查找</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="角色名称" width="390" sortable>
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="说明" width="390">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.desc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="390">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button size="mini" @click="handleall(scope.$index, scope.row)">授权</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="Number(pageSize)"
        layout="total, sizes, prev, pager, next, jumper" :total="Number(total)">
      </el-pagination>
    </div>
    <el-dialog title="创建" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="说明" :label-width="formLabelWidth">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xinzheng">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible2">
      <el-form :model="ruleFrom">
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="ruleFrom.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="说明" :label-width="formLabelWidth">
          <el-input v-model="ruleFrom.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="bianji">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="权限配置" :visible.sync="dialogFormVisible3">
      <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps"
        :default-checked-keys="assignedPermissions" ref="permissionTree">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="allow">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { yonghu, xz, gx, sc, sq, sq2 } from '@/api/xtgl/jsgl.js';
export default {
  name: 'DocumentsAdmin',
  data() {
    return {
      roleId: '',
      assignedPermissions: [],
      ruleFrom: {},
      dialogFormVisible3: false,
      dialogFormVisible2: false,
      dialogFormVisible: false,
      form: {
        name: '',
        desc: ''
      },
      formLabelWidth: '120px',
      pageSize: '20',
      total: '',
      currentPage4: 1,
      tableData: [],
      formInline: {
        name: '',
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  mounted() {
    this.show()
  },
  methods: {
    allow() {
  // 获取选中的节点
  const checkedNodes = this.$refs.permissionTree.getCheckedNodes();
  // 过滤掉 label 包含“对象存储”的节点
  const filteredCheckedNodes = checkedNodes.filter(node => {
    return!node.label.includes('对象存储');
  });
  // 提取选中节点的id组成数组
  const checkedIds = filteredCheckedNodes.map(node => node.id);
  sq2({
    roleId: this.roleId,
    permissions: checkedIds // 将 permissionIds 改为 permissions
  }).then((res) => {
    console.log(res);
  })
  this.dialogFormVisible3 = false
},
    bianji() {
      gx({
       ...this.ruleFrom
      }).then((res) => {
        console.log(res);
        if (res.errmsg == '成功') {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
          this.dialogFormVisible2 = false
          this.show()
        }
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.ruleFrom = row
      this.dialogFormVisible2 = true
    },
    handleDelete(index, row) {
      console.log(index, row);
      sc({
       ...row
      }).then((res) => {
        console.log(res);
        if (res.errmsg == '成功') {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
          this.show()
        }
      })
    },
    handleall(index, row) {
      console.log(index, row);
      this.roleId = row.id
      sq({
        roleId: row.id
      }).then((res) => {
        console.log(res);
        // 假设 res.data.systemPermissions 是树状数据
        const filteredData = res.data.systemPermissions.filter(item => {
          // 这里假设你的数据是对象形式，并且有一些标识字段来判断是否符合要求
          // 比如如果对象有一个名为 'id' 的字段，并且值不是 0 或者其他你不想要的值
          return item.id!== 0;
        });
        this.data = filteredData;
        this.assignedPermissions = res.data.assignedPermissions;
      })
      this.dialogFormVisible3 = true;
    },
    xinzheng() {
      xz({
       ...this.form
      }).then((res) => {
        console.log(res);
        if (res.errmsg == '成功') {
          this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.show()
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.show()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
      this.show()
    },
    show() {
      yonghu({
        page: Number(`${this.currentPage4}`),
        limit: Number(`${this.pageSize}`),
        sort: 'add_time',
        order: 'desc'
      }).then((res) => {
        console.log(res);
        const filteredTableData = res.data.list.filter(item => {
          // 同样假设数据是对象形式，根据具体情况判断过滤条件
          return item.id!== 0;
        });
        this.tableData = filteredTableData;
        this.total = res.data.total;
      })
    },
    onSubmit() {
      yonghu({
        page: 1,
        limit: this.pageSize,
        sort: 'add_time',
        order: 'desc',
        name: this.formInline.username
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    add() {
      this.dialogFormVisible = true
    },
  },
};
</script>